<script setup lang="ts">
  class Graphics {
    container: any
    stage: any
    constructor(container: any, stage: any) {
      this.container = container
      this.stage = stage
    }
    static shape = new createjs.Shape()
    static text = new createjs.Text()
    draw(color: string, x = 50, y = 50) {
      this.stage.addChild(this.container)
      Graphics.shape.graphics.beginFill(color).drawRect(0, 0, 100, 100)
      this.container.addChild(Graphics.shape)
      this.container.x = x
      this.container.y = y
      this.stage.update()
    }
    drawText(
      info: string,
      size: string,
      color: string,
      rotation = 0,
      x = 5,
      y = 5
    ) {
      Graphics.text.text = info
      Graphics.text.font = size
      Graphics.text.color = color
      Graphics.text.x = x
      Graphics.text.y = y
      Graphics.text.rotation = rotation
      this.container.addChild(Graphics.text)
      this.stage.update()
    }
  }

  onMounted(() => {
    console.log(
      '的撒房贷反ffffsffsdfds对DFFD发FFF射dfsd dfdsf点发生大师傅但是首付大 '
    )
    nextTick(() => {
      const stage = new createjs.Stage('gameview')
      const container = new createjs.Container()
      const rect = new Graphics(container, stage)
      rect.draw('DeepSkyBlue')
      rect.drawText('canvas', '24px Arial', 'white', 20, 10, 10)
      const circle = Graphics.shape
      circle.graphics.beginFill('Black').drawCircle(10, 10, 10)
      circle.graphics.beginFill('Black').drawEllipse(20, 10, 60, 20)

      createjs.Tween.get(circle, { loop: true, bounce: true })
        .to({ x: 400 }, 2000, createjs.Ease.getPowInOut(4))
        .to({ alpha: 0, y: 300 }, 2200, createjs.Ease.getPowInOut(2))
        .to({ alpha: 1, y: 300 }, 2000)
        .to({ alpha: 1, x: 0 }, 2000, createjs.Ease.getPowInOut(2))
        .to({ y: 0 }, 2000, createjs.Ease.getPowInOut(2))
      // rect.container.addChild(Graphics.shape)

      stage.update()

      const shape = new createjs.Shape()

      shape.graphics
        .beginLinearGradientFill(['#ffeaae', '#eefeee'], [0, 1], 0, 0, 0, 100)
        .drawCircle(100, 100, 30)
      stage.addChild(shape)
      stage.update()

      // tween动画
      const tween = new createjs.Tween(shape, {
        loop: true,
        bounce: true,
        timeScale: 2,
        reverse: true
      }).to({ y: 400 }, 1000, createjs.Ease.sineInOut(100))
      createjs.Ticker.setFPS(60)
      createjs.Ticker.addEventListener('tick', stage)
      setTimeout(() => {
        // tween.setPaused(true)
        tween.paused = true
        setTimeout(() => {
          tween.paused = false
        }, 1000)
        // createjs.Ticker.removeEventListener("tick", stage);  会暂停整个舞台
      }, 2000)
    })
  })
</script>

<template>
  <div>播放</div>
  <canvas
    id="gameview"
    width="600px"
    height="600px"
    style="background-color: aqua"
  ></canvas>
</template>

<style scoped lang="scss"></style>
